<template>
  <div>
    <!-- 头部 -->
    <div class="hdbox">
      <div class="hdbox0">
        <div class="hdbox_1">
          <a @click="$router.go(-1)" class="goback"
            ><img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/goback.png"
          /></a>
        </div>
        <div class="hdbox_2">
          <ul>
            <li :class="1 == selected ? 'on' : ''">
              <a href="#" @click.prevent="toPinglun">商品</a>
            </li>
            <li :class="2 == selected ? 'on' : ''">
              <a href="#" @click.prevent="toPinglun2">评价</a>
            </li>
            <li :class="3 == selected ? 'on' : ''">
              <a href="#" @click.prevent="toPinglun1">详情</a>
            </li>
          </ul>
        </div>
        <div class="hdbox_3">
          <a @click="showShare = true"
            ><img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/h2.png"
          /></a>
          <a onclick="javascript:history.back(-1)"
            ><img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/h1.png"
          /></a>
        </div>
      </div>
    </div>
    <div>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
    <!-- 好友列表弹框 -->
    <van-popup
      v-model="Fridepopupshow"
      round
      position="bottom"
      :style="{ height: '90%' }"
    >
      <van-cell v-for="item in friendslist" :key="item.listID">
        <template #title>
          <div class="left-item">
            <img :src="iconUrl + item.userImage" alt="" />
            <p>{{ item.user }}</p>
          </div>
        </template>
        <template #right-icon>
          <div>
            <van-button
              class="btnadd"
              @click="onShare(item.id, item.user)"
              round
              type="info"
              >分享</van-button
            >
          </div>
        </template>
      </van-cell>
    </van-popup>
    <div class="hbox"></div>

    <goods
      id="contone"
      :pre="this.$store.state.size[0]"
      :color="this.$store.state.color[0]"
      :goods="goods"
      :list="list"
    ></goods>
    <evaluation
      :evList="evList"
      :evPiclist="evPiclist"
      :evcount="evcount"
      id="contone2"
    ></evaluation>
    <detailsp :goodList="goodList" id="contone1"></detailsp>
    <div class="fbox"></div>
  </div>
</template>
<script>
import goods from "../Details/Goods.vue";
import evaluation from "../Details/Evaluation.vue";
import Detailsp from "../Details/Detailsp.vue";
import { mapState } from "vuex";
// const ws = new WebSocket("ws://localhost:8060");
const ws = new WebSocket("ws://106.55.48.147:8060");
let Base64 = require("js-base64").Base64;

export default {
  components: { goods, evaluation, Detailsp },
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          {
            name: "分享好友",
            icon: "	https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/myfride.png",
          },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      gid: 0,
      selected: 1,
      goods: [],
      list: [],
      evList: [],
      evPiclist: [],
      evcount: 0,
      sid: 0,
      Relevant: [],
      Fridepopupshow: false,
      friendslist: [],
      goodList: [],
    };
  },
  mounted() {
    //注册websocket的几个方法
    ws.addEventListener("open", this.handleWsOpen.bind(this), false);
    ws.addEventListener("close", this.handleWsClose.bind(this), false);
    ws.addEventListener("error", this.handleWsError.bind(this), false);
    ws.addEventListener("message", this.handleWsMessage.bind(this), false); //介绍信息对策方法
  },
  created() {},

  methods: {
    getview(to, from) {
      this.gid = this.$route.params.gid;
      this.$store.commit("setGoodsid", this.$route.params.gid);
      this.getgoodsInfo();
      this.getEvauation();
      this.getGodslist();

      // this.getRelevant()
    },
    async getGodslist() {
      const { data: res } = await this.$http.get("allGoodsList");
      if (res.status !== 200) return false;
      res.data.forEach((item) => {
        item.GoodsPic = this.imgUrl + item.GoodsPic;
      });
      console.log(res);
      this.goodList = res.data;
    },
    async getgoodsInfo() {
      try {
        const { data: res } = await this.$http.get("details", {
          params: { id: this.gid, id2: this.gid, id3: this.gid },
        });
        // if (res.status !== 200) return this.$toast("数据加载失败");

        this.goods = res.data;
        this.list = res.list;
        res.imgList.forEach((item) => {
          item.Picdetails = this.imgUrl + item.Picdetails;
        });

        this.$store.commit("increment", res.imgList);
        this.$store.commit("getSizeID", res.data[0].SizeID);
        this.getgoodsParams();
      } catch (error) {}
      //获商品信息
    },
    //获取商品相关参数
    async getgoodsParams() {
      try {
        const { data: res } = await this.$http.get("goodsParams", {
          params: { gid: this.gid, sid: this.$store.state.SizeID },
        });
        if (res.status !== 200) return false;

        res.data.forEach((item) => {
          item.Pic = this.imgUrl + item.Pic;
        });
        this.$store.commit("getColor", res.data);

        let li = res.list[0].Size;
        var arr = [];
        arr = li.split(",");
        this.$store.commit("getSize", arr);
      } catch (error) {}
      // console.log(this.$store.state.getSizeID)
    },
    //获取评论
    async getEvauation() {
      try {
        const { data: res } = await this.$http.get("getEvaluation", {
          params: {
            gid: this.gid,
            gid2: this.gid,
            gid3: this.gid,
          },
        });
        console.log(res);
        this.evList = res.data;

        this.evPiclist = res.listPic;

        this.evcount = res.userCount;
      } catch (error) {}
    },

    toPinglun() {
      this.selected = 1;
      document.querySelector("#contone").scrollIntoView(true);
    },
    toPinglun1() {
      this.selected = 3;
      document.querySelector("#contone1").scrollIntoView(true);
    },
    toPinglun2() {
      this.selected = 2;
      document.querySelector("#contone2").scrollIntoView(true);
    },
    //显示分享框 选择分享
    onSelect(option) {
      this.showShare = false;
      if (option.name === "分享好友") {
        this.Fridepopupshow = true;
        this.getfriendslist();
      }
    },
    //获取好友列表
    async getfriendslist() {
      const { data: res } = await this.$http.get("getFriendList", {
        params: { id: this.emailLogin[0].userID },
      });
      this.friendslist = res.data;
    },
    handleWsOpen(e) {
      console.log("连接成功：", e);
      this.getUid();
    },
    handleWsClose(e) {
      console.log("连接关闭：", e);
    },
    handleWsError(e) {
      console.log("连接错误：", e);
    },
    //接收消息
    handleWsMessage(e) {
      console.log(e);
    },
    //websocket连接后边向后端发送自己的id用来进行私聊
    getUid() {
      try {
        ws.send(JSON.stringify({ uid: this.emailLogin[0].userID }));
      } catch (error) {}
    },
    // 分享给好友
    async onShare(rid, user) {
      ws.send(
        //发送消息
        JSON.stringify({
          id: this.emailLogin[0].userID,
          receive_id: rid,
          user: this.emailLogin[0].Nickname,
          dateTime: new Date(),
          userImage: this.emailLogin[0].userImg,
          msg: Base64.encode(this.goods[0].GoodsName),
          goodsID: this.goods[0].GoodsID,
          GoodsPic: this.goods[0].GoodsPic,
          GoodsPrice: this.goods[0].GoodsPrice,
          msgType: 6,
          textType: "分享",
        })
      );
      let data = {
        id: this.emailLogin[0].userID,
        receive_id: rid,
        user: this.emailLogin[0].Nickname,
        dateTime: new Date(),
        userImage: this.emailLogin[0].userImg,
        msg: Base64.encode(this.goods[0].GoodsName),
        goodsID: this.goods[0].GoodsID,
        GoodsPic: this.goods[0].GoodsPic,
        GoodsPrice: this.goods[0].GoodsPrice,
        msgType: 6,
        textType: "分享",
      };
      let msg = {
        dateTime: new Date(),
        msg: Base64.encode(this.goods[0].GoodsName),
        receive_id: rid,
        uid: this.emailLogin[0].userID,
      };
      const { data: res } = await this.$http.post("addPrivatechat", data); //新增私聊信息
      const { data: res1 } = await this.$http.post("UpdateLatestMsg", msg);
      this.$store.commit("setfriID", rid);
      this.$store.commit("setchatName", user);
      this.$router.push("/chatNew");
      this.Fridepopupshow = false;
    },
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        this.getview(newVal, oldVal);
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    ...mapState(["emailLogin"]),
  },
};
</script>
<style lang="less" scoped>
.hdbox {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  .hdbox0 {
    height: 2.8rem;
    position: fixed;
    width: 100%;
    max-width: 640px;
    top: 0;
    background: #fff;
    z-index: 1500;
    border-bottom: 1px solid #eee;
    .hdbox_1 {
      position: absolute;
      top: 0;
      left: 0.6rem;
      height: 2.8rem;
      img {
        height: 1.3rem;
        padding-top: 0.8rem;
      }
    }
    .hdbox_2 {
      width: 50%;
      margin: 0 auto;
      height: 2.8rem;
      ul {
        overflow: hidden;
        width: 100%;
        height: 2.8rem;
        li {
          float: left;
          width: 33.3%;
          overflow: hidden;
          height: 2.8rem;
          line-height: 2.8rem;
          a {
            display: block;
            color: #333;
            font-size: 0.8rem;
            text-align: center;
          }
        }
        .on {
          border-bottom: 1px solid #ff2150;
          height: 2.8rem;
          box-sizing: border-box;
          a {
            color: #ff5417;
            font-weight: 600;
          }
        }
      }
    }
    .hdbox_3 {
      position: absolute;
      top: 0;
      right: 0.6rem;
      height: 2.8rem;
      img {
        height: 1.1rem;
        float: right;
        padding-top: 0.8rem;
      }
    }
  }
}
.hbox {
  width: 100%;
  height: 2.85rem;
  overflow: hidden;
}
.left-item {
  display: flex;
  align-items: center;
  p {
    font-family: PingFangSC-Regular;
    font-size: 18px;
    color: #272832;
    letter-spacing: -0.62px;
    margin-left: 16px;
  }
  img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
}
.btnadd {
  width: 60px;
  height: 26px;
  font-size: 14px;
  padding: 0 6px;
  background: #ffe431;
  border: 1px solid #ffe431;
  color: #272832;
  letter-spacing: -0.41px;
}
</style>